(function(){
    let data = null,  
    obImg = null ,
    obLoad = null ,
    num = 0; //用于计数
    const fallsBox = document.querySelector('#fallsbox'),
    columns = Array.form(fallsBox.querySelectorAll('.column')),
    loadMoreBox = document.querySelector('.loadMoreBox');
    /*图片懒加载  在请求之前*/
    const lazyImg = function lazyImg(picBox) {
        let imgBox = picBox.querySelector('img'),
        trueImg = imgBox.getAttribute('data-image'),
        tempImg = new Image;
        tempImg.src  =  trueImg;
        tempImg.onload = () =>{
            imgBox.src = trueImg ;
            imgBox.style.opacity = 1;
        }
    }
    obImg = new IntersectionObserver (changes =>{
       changes.forEach(item => {
        let {isIntersecting , target} = item;
            if(isIntersecting) {
                lazyImg(target)
                obImg.unobserve(target); // 移除监听
            }
       }) ; 
    },{threshold :[0.5]});

    /*基于ajax请求 */
    const quertData = function(){
       let xhr = new XMLHttpRequest;
       xhr.open('GET','./data.json',false)
       xhr.onreadystatechange = () => {
           let {readyState , status , responseText} = xhr ;
           if (readyState === 4 && status === 200) {
               data = JSON.parse(responseText); //字符串转换对象
           }
        }
       xhr.send(); 
    };
    quertData();
    console.log(data);
    /*数据小到大  列 大到小 */
    // 瀑布流绑定
    const render = function () {
       // 按照渲染的宽度（230px） 动态调整数据中的高度
    // 真实宽度/真实高度 = 渲染宽度/渲染高度
    // 渲染高度 = 渲染宽度/（真实宽度/真实高度）
    data = data.map(item => {      // map可以修改数据
        // 调整渲染高度（230），动态调整数据中的高度
        let {width , height} = item;
        item.width = 230;
        item.height = Math.round(230 / (width / height));
        return item;
     })
        console.log(data);
        //三个一组进行循环
        for (let i = 0;i < data.length ; i+=3 ) {
            let group = data.slice(i , i + 3); //0~3

            // 第二轮循环 ， 依次对数据和列进行循环
             if (i > 0) {
                group.sort((a,b) => a.height - b.height);
                columns.sort((a,b) => b.offsetHeight - a.offsetHeight)
             }

            // 循环三条数据：创建对应的三项内容，依次插入三项
            group.forEach(item ,index=> {
                let {pic , title , height , link } = item;
                const term = document.createElement('div');
                term.className = "item"
                term.innerHTML = ``
                columns[index].appendChild(term) //columns 下面的每一项追加term
                // 没插入一项，就把内部的pic-box放入监听器
                obImg.observe(term.querySelector('.pic-box'))
            });

        }
    };
    render()

    /* 触底加载更多数据 */
    loadMoreBox.style.display = 'block'  //第一次渲染完显示该盒子
    obLoad = new IntersectionObserver(([item]) => {
    if (item.isIntersecting) {
        //触底了：加载更多数据
        quertData();
        render();
        num++;
        if (num >= 3 ) {
            //全部加载完毕 
            loadMoreBox.innerHTML = `-- 没有更多了-- `
            obLoad.unobserve(loadMoreBox);
        }
    }
    })
    obLoad.observe(loadMoreBox);
})()